import React from 'react';
import { connect } from 'dva';
import { List, Button, Grid, Badge } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import Container from '../components/Base/Container';
import styles from './PrecisionPage.css';
import MyIcon from '../components/Base/MyIcon';


const Item = List.Item;


class P extends React.Component {
  render() {
    const { dispatch, items2 } = this.props;
    const data = [
      {
        icon: <Badge text={items2[0].length || null}><img alt="" src={require('../assets/c8.png')} className="am-icon am-icon-lg" /></Badge>,
        text: <div><div className={styles.gridTitle}>升NB码</div><div className={styles.gridDescription}>适合1个月以下的宝宝</div><div className={styles.gridDescription}>5kg以下</div></div>,
        title: '升NB码',
        type: 0,
        href: '/p1',
      },
      {
        icon: <Badge text={items2[1].length || null}><img alt="" src={require('../assets/c9.png')} className="am-icon am-icon-lg" /></Badge>,
        text: <div><div className={styles.gridTitle}>升S码</div><div className={styles.gridDescription}>适合1-3个月的宝宝</div><div className={styles.gridDescription}>约4-8kg</div></div>,
        title: '升S码',
        type: 1,
        href: '/p1',
      },
      {
        icon: <Badge text={items2[2].length || null}><img alt="" src={require('../assets/c10.png')} className="am-icon am-icon-lg" /></Badge>,
        text: <div><div className={styles.gridTitle}>升M码</div><div className={styles.gridDescription}>适合4-6个月的宝宝</div><div className={styles.gridDescription}>约6-11kg</div></div>,
        title: '升M码',
        type: 2,
        href: '/p1',
      },
      {
        icon: <Badge text={items2[3].length || null}><img alt="" src={require('../assets/c11.png')} className="am-icon am-icon-lg" /></Badge>,
        text: <div><div className={styles.gridTitle}>升L码</div><div className={styles.gridDescription}>适合7-12个月的宝宝</div><div className={styles.gridDescription}>约9-14kg</div></div>,
        title: '升L码',
        type: 3,
        href: '/p1',
      },
      {
        icon: <Badge text={items2[4].length || null}><img alt="" src={require('../assets/c12.png')} className="am-icon am-icon-lg" /></Badge>,
        text: <div><div className={styles.gridTitle}>升XL码</div><div className={styles.gridDescription}>适合12-23个月的宝宝</div><div className={styles.gridDescription}>约12-17kg</div></div>,
        title: '升XL码',
        type: 4,
        href: '/p1',
      },
    ];
    return (
      <Container title={this.props.location.query.title}>
       <div className="am-list-header" >

         <MyIcon
           type="trips" color="#ff2828" size="xxs"
           style={{ position: 'relative', top: 2, marginRight:8 }}
         />

         <span>总计： <span style={{color:"red"}}>{items2.total} 人</span></span></div>
        <div className="am-list-body">
          <Grid
            data={data} columnNum={2} hasLine
            /* renderItem={dataItem => (
             <Button className={styles.button}>
             {dataItem.name}
             <small>{dataItem.num.length}人</small>
             </Button>
             )}*/
            onClick={(item, index) => {
              dispatch(routerRedux.push({
                pathname: item.href,
                query: {
                  taskType: 7,
                  subType: item.type,
                  title: item.title,
                },
              }));
            }}
          />
        </div>
      </Container>
    );
  }
}
export default connect((state, props) => {
  return { items2: state.task.sub[7] };
})(P);
